import React from 'react';
import { InbizIcon } from '@inbiz/utils';
import './index.less';
import { List, Typography } from 'antd';

const { Title } = Typography;

const prefixCls = 'inbiz-cTitle';

const BizTitle: React.FC<{
  titleOption: { [x: string]: any; value: string; status: boolean };
  iconOption?: {
    [x: string]: any;
    type: string;
    size?: number;
    color?: string;
  };
  extra?: Record<string, any>;
  style?: Record<string, any>;
}> = ({
  titleOption = { value: '标题测试', status: true },
  iconOption,
  extra,
  style,
}) => {
  const { value, status } = titleOption;
  const { type, size = 20, color } = iconOption || {};
  const { backgroundColor, ...spanStyle } = style || {};

  // 处理icon样式
  const getIconStyle = () => {
    let iconStyle: any = {};
    if (size) {
      iconStyle.fontSize = size;
    }
    if (color) {
      iconStyle.color = color;
    }
    return iconStyle;
  };

  if (!status) {
    return null;
  }

  return (
    <List.Item
      className={prefixCls}
      extra={extra}
      style={backgroundColor ? { backgroundColor: backgroundColor } : {}}
    >
      {type && (
        <InbizIcon
          className={`${prefixCls}-icon`}
          style={getIconStyle()}
          type={type}
        />
      )}
      <Title
        ellipsis={{ tooltip: true }}
        className={`${prefixCls}-title`}
        style={spanStyle}
      >
        {value}
      </Title>
    </List.Item>
  );
};

export default BizTitle;
